import styles from "./styles.module.less";
import ChatRoom from "@/components/front/ChatRoom";
import Weather from "@/components/front/Weather";
import AiAssistant from "@/components/front/AiAssistant";
import { useState } from "react";

function Homepage() {
  /*
AI智能助手
*/
  const [showCenter, setShowCenter] = useState(false);

  const AI = () => {
    return (
      <div className={styles.loader} onClick={() => setShowCenter(!showCenter)}>
        AI
      </div>
    );
  };
  return (
    <div className={styles.homepage}>
      <div className={`${styles.poetry} ${styles.poetry_animate}`}>
        <div
          className={`${styles.left} ${
            showCenter ? styles.left_animate : styles.left_reserve
          }`}
        >
          <Weather></Weather>
        </div>

        <div
          className={`${styles.center} ${
            showCenter ? styles.center_animate : ""
          }`}
        >
          <AiAssistant></AiAssistant>
        </div>

        <div
          className={`${styles.right} ${
            showCenter ? styles.right_animate : styles.right_reserve
          }`}
        >
          <ChatRoom></ChatRoom>
        </div>
      </div>
      <div className={styles.project}>
        <div className={styles.left}>
          <div className={styles.project_item}>
            <h3>标题</h3>
            <div>发布时间：2022-01-01</div>
            <div>
              本项目是一个面向新型零售模式的解决方案。项目的核心功能是允许用户在购买菜品时，同时购买其所需的原材料和配料，还能够自由搭配分量。此外，还集成了高德地图定位、商品模糊搜索、微信一键登录和微信支付等多种功能，为用户提供全方位的购物体验。
            </div>
          </div>
          <div className={styles.project_item}>
            <h3>标题</h3>
            <div>发布时间：2022-01-01</div>
            <div>
              本项目是一个面向新型零售模式的解决方案。项目的核心功能是允许用户在购买菜品时，同时购买其所需的原材料和配料，还能够自由搭配分量。此外，还集成了高德地图定位、商品模糊搜索、微信一键登录和微信支付等多种功能，为用户提供全方位的购物体验。
            </div>
          </div>
        </div>
        <div className={styles.right}>
          {/* 个人资料 */}
          <div className={styles.user_info}>
            <div className={styles.avatar}></div>
            <div className={styles.name}>小小怪</div>
            <div className={styles.signature}>个性签名</div>
            <div className={styles.statistics}>
              <div
                style={{
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "center",
                }}
              >
                <span>文章</span>
                <span style={{ display: "flex", justifyContent: "center" }}>
                  2
                </span>
              </div>
              <div
                style={{
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "center",
                }}
              >
                <span>文章</span>
                <span style={{ display: "flex", justifyContent: "center" }}>
                  2
                </span>
              </div>
              <div
                style={{
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "center",
                }}
              >
                <span>文章</span>
                <span style={{ display: "flex", justifyContent: "center" }}>
                  2
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className={styles.ai}>{AI()}</div>
    </div>
  );
}

export default Homepage;
